<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title> fadeInOut 갤러리 </title>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<style>
body {
	margin:20px auto;
	padding:0;	
	width:620px;
	background:#192839;
}
.fadeShow { 
	background:#666;
	width:600px; 
	height:350px; 
	border:2px solid #FDF6DD;        
}
.fadeShow img{position:absolute;}

.fadeShow .active{
   	z-index:1;
}
	
</style>
</head>

<body>

<div class="fadeShow">
     <img class="active" src="slide1.jpg" alt="image1" />
     <img src="slide2.jpg" alt="image2" />
     <img src="slide3.jpg" alt="image3" />
</div>


<!---------- jQuery code Start ---------->
<script>
var showImg, nextImg;

function fadeInOut(){
   
   showImg = $(".fadeShow img:eq(0)");
   nextImg = $(".fadeShow img:eq(1)");
   nextImg.addClass("active");
   nextImg.css("opacity","0")
		  .animate({opacity:1},1000, function() { 			 
		       $(".fadeShow").append( showImg );		
			   showImg.removeClass("active");  
		  });
}
var timer = setInterval("fadeInOut()",3000);

$("div.fadeShow").hover( 
    function() {
	   clearInterval(timer)
	}, 
	function(){
	   timer = setInterval("fadeInOut()",2000);
    }
);
	
</script>
</body>
</html>



